<template>
  <uni-popup
    ref="drawerPopup"
    :type="type"
    @change="change"
    safeArea
    backgroundColor="#fff"
    :maskClick="mask"
  >
    <view class="drawer_body">
      <view class="drawer_title">{{ title }}</view>
      <slot></slot>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, watch, ref } from "vue";
const drawerPopup = ref<any>(null);

import _ from "lodash";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "bottom",
  },
  activeIndex: {
    type: Number,
    default: 0,
  },
  list: {
    type: Array,
    default: () => [],
  },
  confirm_title: {
    type: String,
    default: "确定",
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
  diySlot: {
    type: Boolean,
    default: false,
  },
  mask: {
    type: Boolean,
    default: true,
  },
  iclose: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["confirm", "update:modelValue"]);
const active = ref(0);
const click = () => {
  if (props.mask) {
    close();
  }
};
const change = (e) => {
  if (!e.show) {
    emit("update:modelValue", false);
  }
};
const clos = () => {
  emit("update:modelValue", false);
};
const confir = () => {
  emit("confirm", active.value);
};

const close = _.debounce(clos, 500, { leading: true, trailing: false });
const confirm = _.debounce(confir, 500, { leading: true, trailing: false });

const handleClick = (index) => {
  if (active.value === index) return;
  active.value = index;
  emit("update:modelValue", false);
  emit("confirm", index);
};

watch(
  () => props.modelValue,
  (val) => {
    console.log("watch", val);
    if (val) {
      drawerPopup.value.open();
    } else {
      drawerPopup?.value?.close();
    }
  },
  {deep: true }
);

watch(
  () => props.activeIndex,
  (val) => {
    if (active.value === val) return;
    active.value = val;
  }
);
</script>

<style lang="scss" scoped>
.drawer_body {
  border-radius: 16rpx 16rpx 0rpx 0rpx;
  background-color: #fff;
  width: 100%;
  @include flexCC;

  .drawer_title {
    padding: 32rpx 0;
    // @include dfont;
    color: #000;
    fonst-size: 26rpx;
    font-weight: bold;
    border-bottom: 1rpx solid $backColor;
    width: 100%;
    text-align: center;
  }

  .close {
    border: none;
    padding: 30rpx 0;
  }
}

.drawer_operate:active {
  background-color: rgba(243, 244, 245, 0.4);
}
</style>
